<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">管理</BreadcrumbItem>
			    <BreadcrumbItem href="/wechat/manager/material">素材管理</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<Tabs :value="activeTabs" @on-click="changeTab">
			        <TabPane label="图文消息" name="mpnews" style="padding-left: 1px;">
				        <MatMpnews ref="mpnews"></MatMpnews>
			        </TabPane>
			        <TabPane label="图片" name="image" style="padding-left: 1px;">
			        	<MatImage ref="image"></MatImage>
			        </TabPane>
			        <TabPane label="文本" name="text">
			        	<MatText ref="text"></MatText>
			        </TabPane>
			        <!-- <TabPane label="语音" name="voice">
			        	
			        </TabPane>
			        <TabPane label="视频" name="video">
			        	
			        </TabPane> -->
			    </Tabs>
		    </div>
		</div>
	</div>
</template>
<script>
	import {Breadcrumb,Tabs,Row,Col} from 'iview';
	

	import MatMpnews from 'admin/components/wechat/manager/material/mpnews.vue';
	import MatImage from 'admin/components/wechat/manager/material/image.vue';
	import MatText from 'admin/components/wechat/manager/material/text.vue';

	export default{
		components:{
            Breadcrumb,
            'BreadcrumbItem' : Breadcrumb.Item,
            'TabPane' : Tabs.Pane,
            Tabs,
        	Row,
            'ICol':Col,
            MatMpnews,
            MatImage,
            MatText
        },
        data () {
            return {
            	activeTabs : 'mpnews',
            }
        },
        methods:{
        	changeTab(name){
        		switch(name){
        			case 'mpnews':
        				this.activeTabs = 'mpnews';
        				this.$refs.mpnews.init();
        			break;
        			case 'image':
        				this.activeTabs = 'image';
        				this.$refs.image.init();
        			break;
        			case 'text':
        				this.activeTabs = 'text';
        				this.$refs.text.init();
        			break;
        			default :
        				this.activeTabs = 'mpnews';
        				this.$refs.mpnews.init();
        			break;
        		}
        	}
        },
        mounted :function(){
        	var type = this.$route.query.type;
        	this.changeTab(type);

            this.$store.dispatch('CHANGE_ROUTE',{name:'素材管理',route:'/wechat/manager/material',action:1,closable:true});
        }
	}
</script>